<template>
<!--  表格合并行-->
  <div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column label="年龄">
        <template #default="scope">
          <div class="childList">
            <div class="childList_item" v-for="i in scope.row.list" :key="i.age">{{i.age}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template #default="scope">
          <div class="childList">
            <div class="childList_item" v-for="i in scope.row.list" :key="i.age">{{i.sex}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="幸运色">
        <template #default="scope">
          <div class="childList">
            <div class="childList_item" v-for="i in scope.row.list" :key="i.age">{{i.color}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" />
    </el-table>
  </div>
</template>

<script setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    list:[
      {
        age:12,
        sex:'男',
        color:'red'
      },{
        age:14,
        sex:'男',
        color:'red'
      }
    ]
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    list:[
      {
        age:15,
        sex:'女',
        color:'blue'
      },{
        age:17,
        sex:'女',
        color:'blue'
      },{
        age:15,
        sex:'女',
        color:'blue'
      },{
        age:17,
        sex:'女',
        color:'blue'
      },
    ]
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    list:[
      {
        age:13,
        sex:'男',
        color:'yellow'
      }
    ]
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    list:[
      {
        age:13,
        sex:'女',
        color:'green'
      }
    ]
  },
]
</script>

<style scoped lang="scss">
::v-deep(.el-table .el-table__cell:has(.childList)){
  padding:0;
}
::v-deep(.el-table .cell:has(.childList)){
  padding:0;
}
.childList{
  &_item{
    padding:8px 12px;
    &:not(:nth-last-child(1)){
      border-bottom: 1px solid var(--el-table-border-color);
    }
  }
}
</style>